<template>
	<view class="my-select">
		<view class="sel-con" @click="openSelMd">
			<view class="c-text" v-if="obj && obj.val">{{obj.text}}</view>
			<view class="c-tip" v-else>请选择{{title}}</view>
			<u-icon class="c-r-icon" :color="'#999'" :name="md.show ? 'arrow-up-fill' : 'arrow-down-fill'"></u-icon>
		</view>
		
		<u-modal 
			v-model="md.show" 
			:width="'70%'"
			:title="title"
			:title-style="md.titleSty"
			:confirm-style="md.confmSty"
			:confirm-text="'关闭'"
		>
			<view class="md-list">
				<view 
					class="l-item" 
					v-for="(it, index) in md.list" 
					:key="index"
					:data-obj="it"
					:class="{'seled': it.val == defval.val}"
					@click="seledItem"
				>{{it.text}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name:"my-select",
		props: {
			// 弹框标题
			title: {
				type: String,
				default: '提示'
			},
			// 当前表单参数名称
			name: {
				type: String,
				default: 'psName'
			},
			// 弹框列表
			list: {
				type: Array,
				default: function(){
					return [];
				}
			},
			// 默认值
			defval: {
				type: Object,
				default: function(){
					return {val: '', text: ''}
				}
			}
		},
		data() {
			return {
				// 当前值
				obj: null,
				
				// 列表选项弹框对象
				md: {
					show: false,
					list: [],
					// 标题样式
					titleSty: {
						'color': '#333333',
						'font-weight': '600',
						'padding-top': '0rpx',
						'border-bottom': '2rpx solid #efefef',
					},
					// 确认按钮样式
					confmSty: {
						'color': '#333333',
						'font-weight': '600',
						'line-height': '80rpx',
						'height': '80rpx',
					},
				},
			};
		},
		watch: {
			list: {
				handler: function(o){
					// console.log('监听弹框列表数据', this.name, o);
					
					this.md.list = o;
				},
				// 对象属性修改时也会被调用
				deep: true,
				immediate: true
			},
			defval: {
				handler: function(o){
					// console.log('监听弹框默认值', this.name, o);
					
					this.obj = o;
				},
				// 对象属性修改时也会被调用
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 打开选择列表弹框
			openSelMd(){
				const that = this, U = that.U;
				
				if(that.md.list == 0){
					U.qinfo('没有数据');
				}else{
					that.md.show = true;
				}
			},
			// 选中某一项
			seledItem(e){
				const that = this, obj = e.currentTarget.dataset.obj;
				
				// 关闭弹框
				that.md.show = false;
				that.obj = obj;
				
				that.$emit('seledItem', {name: that.name, obj: obj});
			},
		}
	}
</script>

<style lang="scss">
.my-select{
	min-width: 200rpx;
	text-align: right;
		
	.md-list{
		min-height: 400rpx;
		max-height: 80vh;
		overflow-y: auto;
		
		.l-item{
			padding: 0rpx 40rpx;
			border-bottom: 2rpx solid #efefef;
			text-align: left;
			color: #666;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		
		// .l-item:last-child{
		// 	border-bottom: none;
		// }
		
		.seled{
			color: #00C3CE;
		}
	}
}
</style>
